<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>全部设备</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/deviceList.css">
    <link rel="stylesheet" href="css/bombs.css">
</head>
<body >
<div id="app">
    <!-- 设备列表页面 -->
    <div id="deviceList-page"  v-show="!showHandleSel">
        <header>
            <h1>全部设备(<span>4256</span>) </h1>
            <a href="deviceAdd.html" class="right add-icon" v-show="!showSearch"></a>
        </header>


        <section id="main" v-show="!showSearch">
            <!-- 搜索栏 -->
            <div class="search-wrap">
                <div class="search-box">
                    <a @click="showSearch = true">
                        <div class="search-input">请输入关键字进行搜索</div>
                        <span class="search-icon"></span>
                    </a>

                </div>
            </div>

            <!-- 筛选栏 -->
            <div id="filter-wrap">
                <div>
                    <div class="all-btn fl">全部&nbsp;(<span>999</span>)</div>
                    <a href="deviceFilter.html" class="filter-btn fr">筛选</a>
                </div>
            </div>

            <!-- 设备列表 -->
            <div id="deviceList-wrap">
                <div class="deviceList-item">
                    <!-- 设备编码及状态 -->
                    <div class="deviceList-item-top">
                        <!-- 设备编码 -->
                        <div class="device-code">
                            <label>编码&nbsp;</label><span>BD105921</span>
                        </div>
                        <!-- 设备状态 -->
                        <div class="device-status">正常运行</div>
                        <div class="fr signal-icon on"><span></span></div>
                    </div>

                    <!-- 设备内容 -->
                    <div class="deviceList-item-con">
                        <div class="deviceList-item-con-left fl">
                            <div class="pie-bg"></div>
                        </div>
                        <div class="deviceList-item-con-right fr">
                            <h2 class="customer-name">青岛海士豪塑胶有限有限公司有限有限有限公司</h2>
                            <div class="deviceParam">
                                <div class="temp fl">
                                    <span class="paramNum">90</span>℃
                                    <div class="paramText">温度</div>
                                </div>
                                <div class="electric fl">
                                    <span class="paramNum">90.6</span>A
                                    <div class="paramText">电流</div>
                                </div>
                                <div class="more-btn fl" @click="showHandleSel=true">
                                    <span class="more"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="deviceList-item">
                    <!-- 设备编码及状态 -->
                    <div class="deviceList-item-top">
                        <!-- 设备编码 -->
                        <div class="device-code">
                            <label>编码&nbsp;</label><span>BD105921</span>
                        </div>
                        <!-- 设备状态 -->
                        <div class="device-status alert">机器报警</div>
                        <div class="fr signal-icon on"><span></span></div>
                    </div>

                    <!-- 设备内容 -->
                    <div class="deviceList-item-con">
                        <div class="deviceList-item-con-left fl">
                            <div class="pie-bg"></div>
                        </div>
                        <div class="deviceList-item-con-right fr">
                            <h2 class="customer-name">青岛海士豪塑胶有限有限公司有限有限有限公司</h2>
                            <div class="deviceParam">
                                <div class="temp fl">
                                    <span class="paramNum">90</span>℃
                                    <div class="paramText">温度</div>
                                </div>
                                <div class="electric fl">
                                    <span class="paramNum">90.6</span>A
                                    <div class="paramText">电流</div>
                                </div>
                                <div class="more-btn fl" @click="showHandleSel=true">
                                    <span class="more"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!--底部主菜单导航栏-->
        <nav id="nav-wrap">
            <ul class="nav-list">
                <li class="nav-list-item">
                    <a href="index.html">
                        <div class="nav-icon home-icon"></div>
                        <div class="nav-item-name">首页</div>
                    </a>
                </li>
                <li class="nav-list-item cur">
                    <a href="deviceList.html">
                        <div class="nav-icon device-icon"></div>
                        <div class="nav-item-name">设备</div>
                    </a>
                </li>
                <li class="nav-list-item">
                    <a href="events.html">
                        <div class="nav-icon event-icon"></div>
                        <div class="nav-item-name">事件</div>
                    </a>
                </li>
                <li class="nav-list-item">
                    <a href="mine.html">
                        <div class="nav-icon mine-icon"></div>
                        <div class="nav-item-name">我的</div>
                    </a>
                </li>
                <li class="clear"></li>
            </ul>
        </nav>


        <!-- 搜索面板 -->
        <div class="search-wrap" v-if="showSearch">
            <div class="search-box">
                <div class="left-search fl">
                    <input type="text" class="search-input" placeholder="请输入关键字进行搜索" v-focus>
                    <div class="search-btn">
                        <span class="search-icon"></span>
                    </div>
                </div>
                <span class="quit-btn fr" @click="quitSearch">取消</span>
                <div class="clear"></div>
            </div>
        </div>

    </div>

    <handle-select v-if="showHandleSel" @quit="showHandleSel=false"></handle-select>

    <script type="text/x-template" id="handleSel">
        <div class="layout">
            <div class="handle-box" v-if="!showBombBg">
                <div class="handleTitle">设备操作</div>
                <div class="handle-per">编辑</div>
                <div class="handle-per" @click="ShareBomb">分享</div>
                <div class="handle-per" @click="DelBomb">删除</div>
                <div class="handle-per quit" @click="$emit('quit')">取消</div>
            </div>

            <!--分享、删除弹框-->
            <div class="bomb-bg" v-if="showBombBg">
                <div class="shareBomb" v-if="showShareBomb">
                    <div class="bomb-title">设备分享</div>
                    <ul class="bomb-con">
                        <li>
                            <span class="fl teltext">*手机号:</span>
                            <span class="fl telInput"><input type="text" placeholder="请输入手机号码" v-focus></span>
                            <span class="fr isErrorTip" :class="{'trueTip':trueType,'errorTip':!trueType}"></span>
                        </li>
                        <li>
                            <!--<div class="fl shareWay">
                                <span class="radioStyle"><input type="radio" id="forever" name="way" v-model="chooseway" value="forever"></span>
                                <label for="forever">永久分享</label>
                            </div>
                            <div class="fl shareWay">
                                <span class="radioStyle" :class="{'on_check':}"><input type="radio" id="occassion" name="way" v-model="chooseway" value="occa"></span>
                                <label for="occassion">临时分享</label>
                            </div>-->
                            <div class="fl shareWay">
                                <input type="radio" id="forever" name="way" v-model="chooseway" value="forever">
                                <label for="forever">永久分享</label>
                            </div>
                            <div class="fl shareWay">
                                <input type="radio" id="occassion" name="way" v-model="chooseway" value="occa">
                                <label for="occassion">临时分享</label>
                            </div>
                        </li>
                    </ul>

                    <div class="surebtn">确定</div>
                    <div class="closebtn" @click.stop="showBombBg=false"></div>
                </div>

                <div class="delBomb" v-if="showDelBomb">
                    <div class="bomb-title">删除设备</div>
                    <div class="bomb-tip">
                        <p>确定删除设备 <span>BD123456</span> ?</p>
                    </div>
                    <div class="surebtn">确定</div>
                    <div class="closebtn" @click.stop="showBombBg=false"></div>
                </div>
            </div>
        </div>
    </script>
</div>


<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/lib/echarts.min.js"></script>
<script src="js/lib/vue.min.js"></script>
<script type="text/javascript">

        // 注册一个全局自定义指令 v-focus
        Vue.directive('focus', {
            // 当绑定元素插入到 DOM 中。
            inserted: function (el) {
                // 聚焦元素
                el.focus();
            }
        });

        //注册一个全局组件 handle-select
        Vue.component('handle-select',{
            template:'#handleSel',

            data:function(){
                return {
                    showBombBg:false,//弹框背景
                    showShareBomb:false,//分享弹框
                    showDelBomb:false,//删除弹框
                    trueType: true,//电话号码正确格式判断，true为正确
                    branchs:['text','key'],
                    chooseway: 'occa'
                }
            },
            methods:{
                ShareBomb: function(){
                    this.showBombBg = true;
                    this.showShareBomb = true;
                    this.showDelBomb = false;
                },
                DelBomb: function(){
                    this.showBombBg = true;
                    this.showDelBomb = true;
                    this.showShareBomb = false;
                }
            }
        });


        var vm = new Vue({
            el:'#app',
            data: {
                showSearch: false,//
                inputSearch: '',
                showHandleSel:false//操作弹框

            },
            methods:{
                quitSearch:function(){
                    this.inputSearch = '';
                    this.showSearch = false;
                }
            }
        })

</script>
<script type="text/javascript">
    $(function(){

        var a = $('.pie-bg');
//        console.log(a);
        for(var i=0;i<a.length;i++){
            var pieDiv = '<div class="pie" id="pie_'+ i+'"></div>';
            $(a[i]).append(pieDiv);
            //基于准备好的dom,初始化echart实例
            var myChart = [];
            myChart[i] = echarts.init(document.getElementById('pie_' +i));

            //指定图表的数据和配置项
            var option = [];
            option[i] = {
                title:{
                    text: '1.5Mpa' ,
                    textStyle: {
                        color: '#666',
                        fontSize: 30,
                        fontWeight: 'normal',
                        fontFamily:'Microsoft YaHei'
                    },
                    x: 'center',
                    y: '26%',
                    subtext: '压力',
                    subtextStyle: {
                        color: '#999',
                        fontSize: 24,
                        fontFamily:'Microsoft YaHei'
                    }
                },
                series:[{
                    name: '',
                    type: 'pie',
                    radius: ['83%','100%'],
                    hoverAnimation: false,
                    label:{
                        normal:{
                            show:false
                        }
                    },
                    data:[{
                        value: 1.5,
                        name: '压力值',
                        itemStyle: {
                            normal: {
                                color: '#fabc1c'
                            }
                        }
                    },
                        {
                            value: 3,
                            name: '占位',
                            itemStyle: {
                                normal: {
                                    color: 'transparent'
                                }
                            }
                        }]

                }]
            };

            //使用刚刚指定的数据和配置项显示图表
            myChart[i].setOption(option[i]);
        }

    })
</script>

</body>
</html>